<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>layui在线调试</title>
		<link rel="stylesheet" href="./layui/css/layui.css" media="all">
		<style>
			body {
				margin: 10px;
			}

			.layui-card-header {
				background: #01AAED;
				color: #fff
			}
			p.title-{
				color:#fff;
				font-size:16px;
				margin-bottom:10px
			}
			p.val{

				font-size:35px;
				color:#fff;
			}
			.kuai{
				height:60px;
				padding:20px 20px 20px 100px;
				background-repeat: no-repeat;
				background-size: 80px auto;
				background-position: left center;
			}
			.kuai.dian{
				background-image: url("./static/images/device2.png");
			}
			.kuai.dianm{
				background-image: url("./static/images/device1.png");
			}
			.kuai.shui{
				background-image: url("./static/images/shui.png");
			}
			.kuai.shuim{
				background-image: url("./static/images/shuim.png");
			}
.text-container{
				position: absolute;
				bottom: 3px;
				left: 3px;
			}
			
			.text-container span{
				color: #FFF9EC;
				font-size: 18px;
				font-weight: bold;
			}
			.container {
					margin-top: 10px;
					height: 100%;
					width: 100%;
					color: #333;
					font-family: "微软雅黑";
				}
			
				.title {
					margin-top: 5px;
					width: 100%;
					height: 25px;
					line-height: 30px;
			
				}
			
				.title a {
					padding-left: 20px;
					text-decoration: none;
				}
			
				a:hover {
					color: blue;
				}
			
				img {
					object-fit: cover;
				}
			
				.img_container {
					overflow: hidden;
					width: 100%;
					height: 120px;
					margin-top: 15px;
				}
			
				.img_container img {
					width: 100%;
					min-height: 120px;
					object-fit: cover;
				}
			
				.table_contianer {
					margin-top: 5px;
			
					width: 100%;
					margin: 5px;
				}
			
				.table_context {
					padding-left: 5px;
					border-collapse: separate;
					border-spacing: 0px 10px;
				}
			
				.table_value {
					text-align: left;
				}
			
				.line {
					margin-top: 10px;
					background: #ccc;
					width: 100%;
					height: 2px;
				}


		</style>
	</head>

	<body>
		<div class="layui-row layui-col-space10">
			<div class="layui-col-xs3 layui-col-md3">
				<div class="layui-card" style="background-color: #009688;">
					<div class="layui-card-body kuai dian">
						<p class="title-">设备总数</p>
						<p class="val">1734</p>
					</div>
				</div>
			</div>
			<div class="layui-col-xs3 layui-col-md3">
				<div class="layui-card" style="background-color: #f45;">
					<div class="layui-card-body kuai dianm">
						<p class="title-">异常设备数</p>
						<p class="val">10</p>
					</div>
				</div>
			</div>
			<div class="layui-col-xs3 layui-col-md3">
				<div class="layui-card" style="background-color: #01AAED;">
					<div class="layui-card-body kuai shui">
						<p class="title-">累计进水量</p>
						<p class="val">1634m³</p>
					</div>
				</div>
			</div>
			<div class="layui-col-xs3 layui-col-md3">
				<div class="layui-card" style="background-color: #2F4056; ">
					<div class="layui-card-body kuai shuim">
						<p class="title-">累计供水量</p>
						<p class="val">1534m³</p>
					</div>
				</div>
			</div>
		</div>


		<div class="layui-row layui-col-space10">
			<div class="layui-col-lg6 layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">异常列表</div>
					<div class="layui-col-xs12">
						<div style="height: 350px">
							<table class="layui-hide" id="test"></table>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-lg6 layui-col-md6">
				<div class="layui-card">
					<div class="layui-card-header">设备监测图</div>
					<div class="layui-col-xs12">
						<div id="map" style="height: 332px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-xs12">
			<div class="layui-card">
				<div class="layui-card-body">
					<div class="layui-tab layui-tab-brief" lay-filter="tabZZT">
						<ul class="layui-tab-title">
							<li class="layui-this">水质情况</li>
							<li>耗能趋势</li>
						</ul>
						<div class="layui-tab-content">
							<div class="layui-tab-item layui-show">
								<div class="layui-row layui-col-space20">
									<div class="layui-col-xs6">
										<div id="xse" style="height: 300px;margin-top: 20px;"></div>
									</div>
									<div class="layui-col-xs6">
										<table class="layui-table" lay-skin="nob">
											<colgroup>
												<col width="50">
												<col>
												<col width="96">
											</colgroup>
											<thead>
												<tr style="background: none;color: #333;">
													<th colspan="3">水质不达标情况</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td><span class="layui-badge layui-bg-cyan">1</span></td>
													<td>浊度0.2NTU,余氯0.2mg/l</td>
													<td>0时</td>
												</tr>
												<tr>
													<td><span class="layui-badge layui-bg-cyan">2</span></td>
													<td>浊度2.6NTU,余氯0.05mg/l</td>
													<td>1时</td>
												</tr>
												<tr>
													<td><span class="layui-badge layui-bg-cyan">3</span></td>
													<td>浊度0.28NTU,余氯2.5mg/l</td>
													<td>2时</td>
												</tr>
												<tr>
													<td><span class="layui-badge layui-bg-gray">4</span></td>
													<td>浊度2.5NTU,余氯0.5mg/l</td>
													<td>3时</td>
												</tr>
												<tr>
													<td><span class="layui-badge layui-bg-gray">5</span></td>
													<td>浊度0.03NTU,余氯0.6mg/l</td>
													<td>4时</td>
												</tr>
												<tr>
													<td><span class="layui-badge layui-bg-gray">6</span></td>
													<td>浊度0.6NTU,余氯0.4mg/l</td>
													<td>5时</td>
												</tr>
												<tr>
													<td><span class="layui-badge layui-bg-gray">7</span></td>
													<td>浊度1.8NTU,余氯1.2mg/l</td>
													<td>6时</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<div class="layui-tab-item">
								<div class="layui-row layui-col-space20">
									<div class="layui-col-xs6">
										<div id="fwl" style="height: 300px;margin-top: 20px;"></div>
									</div>
									<div class="layui-col-xs6">
										<table class="layui-table" lay-skin="nob">
											<colgroup>
												<col width="50">
												<col>
												<col width="96">
											</colgroup>
											<thead>
												<tr style="background: none;color: #333;">
													<th colspan="3">耗能排名</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td><span class="layui-badge layui-bg-cyan">1</span></td>
													<td>秣周东路诚园小区</td>
													<td>323,234</td>
												</tr>
												<tr>
													<td><span class="layui-badge layui-bg-cyan">2</span></td>
													<td>秣陵福源小区</td>
													<td>313,234</td>
												</tr>
												<tr>
													<td><span class="layui-badge layui-bg-cyan">3</span></td>
													<td>翠屏诚园小区</td>
													<td>300,534</td>
												</tr>
												<tr>
													<td><span class="layui-badge layui-bg-gray">4</span></td>
													<td>世纪花园小区</td>
													<td>223,214</td>
												</tr>
												<tr>
													<td><span class="layui-badge layui-bg-gray">5</span></td>
													<td>家乐福小区</td>
													<td>213,134</td>
												</tr>
												<tr>
													<td><span class="layui-badge layui-bg-gray">6</span></td>
													<td>碧水湾小区</td>
													<td>203,234</td>
												</tr>
												<tr>
													<td><span class="layui-badge layui-bg-gray">7</span></td>
													<td>同曦鸣城小区</td>
													<td>183,934</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--    </div>-->
	</body>
	<script src="./layui/layui.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=oSoZAPv0Q3ShlkEDZsZmkg6fvSyhzKCU"> </script>
	<script src="./static/js/mapUtils.js"></script>
	<script src="./static/libs/echarts/echarts.min.js"></script>
	<script src="./static/libs/echarts/echartsTheme.js"></script>
	<script>
		layui.config({
			base: './static/js/',
		}).extend({ //设定模块别名
			mapControl: 'mapControl'
		});
		layui.use(['layer', 'element', 'table', 'mapControl'], function() {
			var $ = layui.jquery;
			var layer = layui.layer;
			var element = layui.element;
			var table = layui.table;
			var mapCtrl = layui.mapControl;
			mapCtrl.init();
			// var pts = wgs2bd(30.656817, 104.074631);
			// var center = new BMap.Point(pts[1], pts[0]);
			// //var center = new BMap.Point(117.7329972 + 0.01115, 38.972775 + 0.007);
			// map = new BMap.Map("map", {
			//     enableMapClick: false
			// });
			// map.centerAndZoom(center, 12);
			// map.enableDragging();
			// map.enableInertialDragging();
			// map.enableScrollWheelZoom();
			// map.enableDoubleClickZoom();
			// map.enableKeyboard();
			// map.enableContinuousZoom();
			// var ctrl_type = new BMap.MapTypeControl({
			//     mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP,
			//         BMAP_HYBRID_MAP
			//     ],
			//     anchor: BMAP_ANCHOR_TOP_LEFT,
			//     offset: new BMap.Size(20, 20)
			// });
			// map.addControl(ctrl_type);
			// for(var index =0; index < 5; index ++){
			// 	let pts = wgs2bd(Number(item.lat), Number(item.lon));
			// 	let point = new BMap.Point(pts[1], pts[0]);
			// 	let icon = new BMap.Icon("./static/images/pump.png", new BMap.Size(32, 32));
			// 	var marker = new BMap.Marker(point, { icon: icon });
			// 	//var label = new BMap.Label(item.name);
			// 	marker.setTitle(item.name);
			// 	map.addOverlay(marker);

			// 	marker.addEventListener("click", function() {
			// 	    _this.openWindow(item.name, item.imageUrl, 1173,719);
			// 	});
			// }



			table.render({
				elem: '#test',
				url: './static/data/errDevice.json',
				cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
					,
				cols: [
					[{
							field: 'id',
							width: 20,
							title: 'ID'
						}, {
							field: 'deviceCode',
							title: '设备编码'
						}, {
							field: 'deviceName',
							title: '设备名称'
						}, {
							field: 'sex',
							title: '报警内容'
						}, {
							field: 'city',
							title: '报警类型',
							style: 'color:red'
						}, {
							field: 'sign',
							title: '报警时间',
						} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
					]
				]
			});

			// var myCharts = echarts.init(document.getElementById('press'), myEchartsTheme);
			// option = {
			//     title: {
			//         text: '压力数据对比'
			//     },
			//     tooltip: {
			//         trigger: 'axis'
			//     },
			//     legend: {
			//         data:['翠屏诚园','奥斯伯恩','世纪花园','碧水湾','秣陵福源']
			//     },
			//     grid: {
			//         left: '0',
			//         right: '0',
			//         bottom: '0',
			//         containLabel: true
			//     },
			//     toolbox: {
			//         feature: {
			//             saveAsImage: {}
			//         }
			//     },
			//     xAxis: {
			//         type: 'category',
			//         boundaryGap: false,
			//         data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
			//     },
			//     yAxis: {
			//         type: 'value'
			//     },
			//     series: [
			//         {
			//             name:'翠屏诚园',
			//             type:'line',
			//             data:[120, 432, 301, 134, 490, 230, 110, 120, 432, 301, 134, 190, 230, 10]
			//         },
			//         {
			//             name:'奥斯伯恩',
			//             type:'line',
			//             data:[220, 682, 191, 234, 290, 330, 310, 134, 190, 230, 110, 120, 432]
			//         },
			//         {
			//             name:'世纪花园',
			//             type:'line',
			//             data:[150, 232, 201, 154, 190, 330, 410, 682, 191, 234, 290, 330, 310]
			//         },
			//         {
			//             name:'碧水湾',
			//             type:'line',
			//             data:[320, 332, 301, 334, 390, 330, 320, 301, 334, 390, 154, 190, 330]
			//         },
			//         {
			//             name:'秣陵福源',
			//             type:'line',
			//             data:[520, 432, 901, 234, 290, 130, 120, 682, 191, 234, 390, 154]
			//         }
			//     ]
			// };

			// myCharts.setOption(option);

			// var myCharts2 = echarts.init(document.getElementById('supplyRate'), myEchartsTheme);
			// option1 = {
			//     title : {
			//         text: '各小区供水占比',
			//         x:'center'
			//     },
			//     tooltip : {
			//         trigger: 'item',
			//         formatter: "{a} <br/>{b} : {c} ({d}%)"
			//     },
			//     legend: {
			//         orient: 'vertical',
			//         left: 'left',
			//         data: ['翠屏诚园','奥斯伯恩','世纪花园','碧水湾','秣陵福源']
			//     },
			//     series : [
			//         {
			//             name: '访问来源',
			//             type: 'pie',
			//             radius : '55%',
			//             center: ['50%', '60%'],
			//             data:[
			//                 {value:335, name:'翠屏诚园'},
			//                 {value:310, name:'奥斯伯恩'},
			//                 {value:234, name:'世纪花园'},
			//                 {value:135, name:'碧水湾'},
			//                 {value:1548, name:'秣陵福源'}
			//             ],
			//             itemStyle: {
			//                 emphasis: {
			//                     shadowBlur: 10,
			//                     shadowOffsetX: 0,
			//                     shadowColor: 'rgba(0, 0, 0, 0.5)'
			//                 }
			//             }
			//         }
			//     ]
			// };

			// myCharts2.setOption(option1);
			// 渲染销售额图表
			var myCharts3 = echarts.init(document.getElementById('xse'), myEchartsTheme);
			/* var option3 = {
			    title: {
			        text: '供水趋势',
			        textStyle: {
			            color: '#000',
			            fontSize: 14
			        }
			    },
			    tooltip: {},
			    grid: {
			        left: '0',
			        right: '0',
			        bottom: '0',
			        containLabel: true
			    },
			    xAxis: {
			        data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
			    },
			    yAxis: {},
			    series: [{
			        type: 'bar',
			        data: [726, 1013, 690, 892, 982, 570, 536, 546, 988, 1002, 206, 506],
			        barMaxWidth: 45
			    }]
			}; */
			option3 = {
				title: {
					text: '余氯浊度一览图',
					subtext: '余氯(mg/l)、浊度(NTU)'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['浊度', '余氯']
				},
				toolbox: {
					show: true,
					feature: {
						magicType: {
							show: true,
							type: ['stack', 'tiled']
						},
						saveAsImage: {
							show: true
						}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时',
						'16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时', '24时'
					]
				},
				yAxis: {
					type: 'value'
				},
				series: [{
						name: '余氯',
						type: 'line',
						smooth: true,
						data: [0.2, 0.05, 2.5, 0.5, 0.6, 0.4, 1.2, 0.2, 2, 2.5, 0.5, 0.6, 0.4, 1.2, 0.2, 2, 2.5, 0.5, 0.6, 0.4, 1.2,
							2.2, 1.2, 2.3, 0.6
						]
					},
					{
						name: '浊度',
						type: 'line',
						smooth: true,
						data: [2.5, 2.6, 1, 2.5, 0.03, 0.6, 1.8, 2.5, 2.6, 0.5, 2.5, 0.03, 0.6, 1.8, 2.5, 2.6, 0.5, 2.5, 0.03, 0.6,
							1.8, 0.1, 1.2, 2.6, 3
						]
					}
				]
			};

			myCharts3.setOption(option3);

			// 渲染访问量图表
			var myCharts4 = echarts.init(document.getElementById('fwl'), myEchartsTheme);
			var option4 = {
				title: {
					text: '耗能趋势',
					textStyle: {
						color: '#000',
						fontSize: 14
					}
				},
				tooltip: {},
				grid: {
					left: '0',
					right: '0',
					bottom: '0',
					containLabel: true
				},
				xAxis: {
					data: ['1月', '2月', '3月', '4月', '6月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
				},
				yAxis: {},
				series: [{
					type: 'bar',
					data: [558, 856, 880, 1325, 982, 856, 655, 546, 988, 985, 568, 302],
					barMaxWidth: 45
				}]
			};
			myCharts4.setOption(option4);

			// 切换选项卡重新渲染
			element.on('tab(tabZZT)', function(data) {
				if (data.index == 0) {
					myCharts3.resize();
				} else {
					myCharts4.resize();
				}
			});

			// 窗口大小改变事件
			window.onresize = function() {
				//myCharts.resize();
				//myCharts2.resize();
				myCharts3.resize();
				myCharts4.resize();
			};

		});
	</script>
</html>
